<template>
  <div class="execution">
    <div>
      <iep-page-header title="字典管理"></iep-page-header>
      <iep-button type="primary" @click="handleAdd()" icon="el-icon-plus" plain>添加字典</iep-button>
      <iep-table
        :isLoadTable="isLoadTable"
        :pagination="pagination"
        :columnsMap="columnsMap"
        :pagedTable="pagedTable"
        @size-change="handlePaginationSizeChange"
        @current-change="handlePaginationCurrentChange">
        <el-table-column prop="operation" label="操作" width="250">
          <template slot-scope="scope">
            <operation-wrapper>
              <iep-button type="warning" @click="handleChild(scope.row, scope.index)" icon="el-icon-plus" plain>子项
              </iep-button>
              <iep-button @click="handleEdit(scope.row)" plain>编辑
              </iep-button>
              <iep-button @click="handleDeleteById(scope.row)" plain>删除
              </iep-button>
            </operation-wrapper>
          </template>
        </el-table-column>
      </iep-table>
    </div>
    <dialog-form ref="DialogForm" @load-page="loadPage"></dialog-form>
    <child-form ref="ChildForm" @load-page="loadPage"></child-form>
  </div>
</template>

<script>
import { addObj, delObj, fetchList, editObj } from '@/api/dict'
import { mapGetters } from 'vuex'
import mixins from '@/mixins/mixins'
import DialogForm from './DialogForm'
import ChildForm from './ChildForm'
import AdvanceSearch from './AdvanceSearch'
import { columnsMap, initMemberForm } from './options'

export default {
  name: 'DictPage',
  components: { DialogForm, ChildForm, AdvanceSearch },
  mixins: [mixins],
  data () {
    return {
      columnsMap
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created () {
    this.loadPage()
  },
  methods: {
    handleAdd () {
      this.$refs['DialogForm'].methodName = '添加'
      this.$refs['DialogForm'].formRequestFn = addObj
      this.$refs['DialogForm'].disabled = false
      this.$refs['DialogForm'].dialogShow = true
    },
    handleEdit (row) {
      this.$refs['DialogForm'].form = Object.assign({}, initMemberForm(), row)
      this.$refs['DialogForm'].methodName = '编辑'
      this.$refs['DialogForm'].formRequestFn = editObj
      this.$refs['DialogForm'].disabled = false
      this.$refs['DialogForm'].dialogShow = true
    },
    handleChild (row) {
      this.$refs['ChildForm'].id = row.id
      this.$refs['ChildForm'].dialogShow = true
      this.$refs['ChildForm'].loadPage()
    },
    loadPage (param = this.searchForm) {
      this.loadTable(param, fetchList)
    },
    handleDeleteById (row) {
      this.$http({
        url: this.$http.adornUrl(delObj(row.id).url),
        method: delObj().method
      }).then(() => {
        this.loadPage()
      })
    }
  }
}
</script>
